<template>
	<view>
		<view class="u-flex search u-row-between">
			<u-search :show-action="false" v-model="keyword" :animation="false" placeholder="搜索商品"
				:input-style="{width:'520rpx'}" @search="search"></u-search>
			<view>
			<navigator url="../rule/index?id=9">规则</navigator>
				</view>
		</view>

		<view class="mode" v-if="listing.length">
			<view class="titleBg">
				<text class="text">正在进行中</text>
			</view>
			
			<view v-for="(item,index) in listing" :key="index" class="listing u-flex" @click="kanjian(item)">
				<view>
					<u-image :src="item.goods[0].cover" width="250" height="250" border-radius="20"></u-image>
				</view>
				<view class="u-margin-left-20">
					<view class="u-flex u-row-between">
						<view style="color: #A66D00;font-size: 30rpx;">已砍<text style="color: #FF6450;">{{item.bargainPrice}}</text>元</view>
						<view style="color: #A66D00;font-size: 28rpx;">仅剩<text style="color: #FF6450;">{{item.progress}}%</text></view>
					</view>
					<view class="time">
						{{item.expirationTime}}后结束
					</view>
					<view class="btn">继续砍价</view>
				</view>
			</view>
		</view>


		
		<view class="u-flex u-row-between alllist" style="flex-wrap: wrap;" v-if="list.length">
		
			<view v-for="(item,index) in list" :key="index" class="list">
				<u-image :src="item.cover" width="300" height="300" border-radius="20"></u-image>
				<view class="sale">已送出<text>{{item.total}}件</text></view>
				<view class="name u-line-2" style="height: 75rpx;">{{item.goodsName}}</view>
				<view class="btn" @click="go(item)">点击免费拿</view>
			</view>
		</view>

	
		
		
		
		<view class="bootomleft" v-if="record.length">
		
			<view v-for="(item,index) in record" :key="index" class="u-flex ">
				<u-image width="80" height="80" :src="item.headimg" shape="circle"></u-image>
				<view class="u-margin-left-20">
					<view>{{item.recipient}}免费拿</view>
					<view>{{item.goods[0].name}}</view>
				</view>
			</view> 
		</view>	
					
		
		<view class="bootomright" @click="get">
		   		<u-image src="/static/daoshou.png" width="100" height="100" mode="widthFix"></u-image>
		 </view>	
		
		
		<u-loadmore :status="status" />
		<u-toast ref="uToast" />


	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				listing: [],

				list: [],
				
				record:[],
				
				page: 1,

				status: 'loadmore',

			}
		},
		methods: {
			kanjian(item){
				uni.navigateTo({
					url:"likeProduct?id="+item.id
				})
			},
			search(){
				this.page=1;
				this.jiazai()
			},
			get(){
			    uni.navigateTo({
			    	url:"getList"
			    })
			},
			allrecord(){
				this.$u.post('/api/Indent/hew', {
					limit:1
				}, {}).then(res => {
				    this.record=res.data
				}).catch(err => {})
				
			},
			go(item){
				uni.navigateTo({
					url:"detail?id="+item.id
				})
			},
			jiazaiing(){
				this.$u.post('/api/Indent/bargainList', {
					
				}, {}).then(res => {
					
					  res.data.forEach(item=>{
						  item.progress=Number(item.progress).toFixed(2);
					  })
					   this.listing=res.data;
				}).catch(err => {})
			},
			jiazai() {
				this.$u.post('/api/index/goods', {
					goods_type: 3,
					keyword: this.keyword,
					page: this.page
				}, {}).then(res => {

					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false

				}).catch(err => {})
			}
		},
		onLoad() {
			this.jiazai()
			this.allrecord()
			
		},
		onShow() {
			this.jiazaiing()
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.jiazai()
			}

		},
	}
</script>

<style lang="scss">
	page {

		width: 100%;
		height: 100vh;

		background: #FB5E3F;
		display: inline-block;
	}

	.search {
		width: 690rpx;
		margin: 20rpx auto;
		color: #FFFFFF;
	}

	.mode {
		width: 690rpx;

		margin:40rpx  auto;
		border-radius: 0 0 40rpx 40rpx;
		
	}

	.titleBg {
		width: 100%;
		height: 68rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		background: linear-gradient(89.94deg, #FFCD7C 0.04%, #FFB843 48.95%, #FFCD7C 99.95%);
		text-align: center;
		color: #FFFFFF;
		position: relative;
		line-height: 68rpx;
		font-size: 30rpx;

		.text::after {
			content: '';
			width: 200rpx;
			height: 3rpx;
			background: #FFFFFF;
			position: absolute;
			left: 50rpx;
			top: 34rpx;

		}

		.text::before {
			content: '';
			width: 200rpx;
			height: 3rpx;
			background: #FFFFFF;
			position: absolute;
			right: 50rpx;
			top: 34rpx;

		}
	}

	.alllist {
		width: 690rpx;
		margin: auto;
		padding: 40rpx;
		background: #FBE2B9;
		border-radius: 40rpx;
	}

	.listing {
          background: #FFFFFF;
		  padding: 20rpx;
		  border-radius: 0 ;
		.time {
			background: #FFEECC;
			border-radius: 10rpx;
			padding: 10rpx 25rpx;
			color: #A66D00;
			font-size: 24rpx;
			text-align: center;
			display: table;
			margin: 30rpx 0;
		}

		.btn {
			width: 367rpx;
			height: 66rpx;

			background: linear-gradient(89.39deg, #FF6450 5.28%, #FFB525 99.47%);
			text-align: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			line-height: 66rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}


	.list {
		position: relative;
		width: 300rpx;
		background: linear-gradient(#FFF8F1, #FCEAC1);
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		.sale {
			width: 220rpx;
			height: 46rpx;
			line-height: 46rpx;
			background: #FBD9AB;
			border-radius: 0 0 40rpx 40rpx;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			left: 40rpx;
			text-align: center;
			color: #A66D00;


		}

		.name {
			color: #A66D00;
			font-size: 28rpx;
			text-align: center;
			margin: 20rpx 0;
			font-weight: bolder;
		}

		.btn {
			width: 260rpx;
			height: 66rpx;
			background: #FF820F;
			border-radius: 50rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 66rpx;
			font-size: 32rpx;
			margin: auto;

		}
	}
	.bootomleft{
		
	 position: fixed;
	   bottom: 80rpx;
		left: 0;

		z-index: 999;
		  background: linear-gradient(180deg, #FB5E3F 0%, #FDDFA9 100%);
		  border-radius:  0px 60rpx 60rpx 0;
		  color: #FFFFFF;
		  padding:10rpx 30rpx;
		
	 
	}
	.bootomright{
		
		position: fixed;
           bottom: 100rpx;
		  right: 0;
	   z-index: 999;
	}
</style>
